<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <script src="../node_modules/@vue/runtime-dom/dist/runtime-dom.global.js"></script>

  <body>
    <div id="app"></div>
  </body>
  <script>
    let { reactive, createApp, h, KeepAlive, ref } = VueRuntimeDOM;

    // 如何缓存的？  vnode， 为了性能考虑 。 我们弄一个盒子将渲染的结果临时的移动到内存中，如果后续切换回来，再从内存中直接拿出来就好了
    const Component1 = {
      key: 1,
      render: () => {
        console.log("render1");
        return h("a", "a1");
      },
    };
    const Component2 = {
      key: 2,
      render: () => {
        console.log("render2");
        return h("a", "a2");
      },
    };
    const Component3 = {
      key: 3,
      render: () => {
        console.log("render3");
        return h("a", "a3");
      },
    };

    let app = createApp({
      setup() {
        const Component = ref(Component1);
        setTimeout(() => {
          Component.value = Component2;
        }, 3000);

        setTimeout(() => {
          Component.value = Component1;
        }, 6000);
        return () => {
          return h(
            KeepAlive,
            { max: 2 },
            {
              default: () => h(Component.value),
            }
          );
        };
      },
    });
    app.mount("#app");
  </script>
</html>
